<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>音乐列表子页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-content ul li{position:relative;}
			video{width:300px;height:40px;position:absolute;right:0;top:0;display:none;}
			.mui-content ul li span{display:block;position:absolute;right:15px;top:20px;width:24px;height:24px;background:url("images/list_sprite.png") 0 0px no-repeat;background-size: 24px 60px;overflow: hidden;}
			.mui-content ul li span.current{background-position: 0 -24px;}
		</style>
	</head>

	<body>
		<!--头部-->
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">内地音乐榜单</h1>
		</header>
		
		<!--主体部分-->
		<div class="mui-content">
		    <ul class="mui-table-view" id="ul">
		        
		        
		    </ul>
		</div>
		
		
		<script src="js/template-web.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		
		<!--创建一个模板-->
		<script type="text/html" id="tpl-lis">
			<% for(var i=0;i<20;i++) { %>
				<li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="<%= data[i].albumpic_small%>">
		                <div class="mui-media-body">
		                    <%= data[i].singername %>
		                    <p class="mui-ellipsis"><%= data[i].songname %></p>
		                </div>
		            </a>
		            <video controls autoplay loop name="media">
		               <source src="<%= data[i].url%>" type="audio/mp4">
		            </video>
		            <span></span>
		        </li>
				
			<%}%>
			
		</script>
		
		<script type="text/javascript">
			mui.init(
				mui.get("http://route.showapi.com/213-4",{
					showapi_appid:36618,
	                showapi_sign:'13f2c758227543cd8be498acbdcbc9b1',
	                topid:5,
	                maxResult:20
				},function(res){
					if(res && res.showapi_res_code==0){
						var data=res.showapi_res_body.pagebean.songlist;
						var lis = template("tpl-lis", {data:data});
						$("#ul").append(lis);
						
						
						//点击放歌
						var videos=document.getElementsByTagName("video");  //拿到所有viodeo的dom对象
						for(j=0;j<videos.length;j++){
							videos[j].pause();  //初始化都为暂停
						}
						mui('#ul').on('tap', 'li', function() {  //点击切换播放与暂停
							
							var others=$(this).siblings().children("video");  //拿到被点击的li的所有兄弟元素li的video的jq对象
							var ospan=$(this).siblings().children("span");  //拿到被点击的li的所有兄弟元素li的span的jq对象
							
							var video=$(this).children("video")[0];  //拿到被点击的viodeo的dom对象
							var span=$(this).children("span");  //拿到被点击的span的jq对象
							if(video.paused){//判断音乐是否处于暂停状态
								video.play();
								span.addClass("current");
								
								others.each(function(index,ele){  //当某个li标签被点击播放音乐时其他li标签都停止播放
									$(ele)[0].pause();
									ospan.removeClass("current");
								})
								
								
							}else{
								video.pause();
								span.removeClass("current");
							}
							
							
						});
						
						//点击图片进入歌词页面
						$("li").on("tap","img",function(){
							var temp=$(this).parent("a").parent("li").index(); //拿到当前点击的img所在的li标签的索引
							mui.openWindow({
								url:"Lyrics.html",
                        		id:"Lyrics",
                       		 	styles:{
                          			top:0,//新页面顶部位置
                         		 	bottom: 0//新页面底部位置
								},
								extras:{//自定义扩展参数，可以用来处理页面间传值
      								datas:data[temp] //将此时点击的音乐数据传给Lyrics.html
    							},
                       		})
						})
						
					}else{
						mui.alert(res.showapi_res_error);
					}
				},"json")
			)
		</script>
	</body>

</html>